<template>
    <div class="clearfix">
        <section class="content-header">
            排班管理&nbsp;/&nbsp;值班岗位管理&nbsp;/&nbsp;修改值班岗位
        </section>

        <div class="col-md-12" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-4">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">岗位名称：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="inputEmail3" placeholder="请输入岗位名称" v-model="planData.plan.jobName">
                                </div>
                            </div>
                            <danwei v-model="planData.plan.companyId" />
                            <bumen v-model="planData.plan.deptId" :companyId="planData.plan.companyId" />
                            <person v-model="planData.plan.leaderId" :deptId="planData.plan.deptId" />
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">联系电话：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="inputEmail3" placeholder="输入11位手机号码" v-model="planData.plan.phonenum">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" rows="5" placeholder="请输入事件描述" maxlength="200" v-model="planData.plan.remark"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">岗位人员：</label>
                                <div class="col-sm-8">
                                    <v-select placeholder="请选择" multiple :options="personsList" label="name" :value="planData.list" style="background:#FFF"></v-select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-md-8">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">值班时间：</label>
                                <div class="col-sm-10">
                                    <table id="example" class="addgangwei" style="font-size:14px">
                                        <tr v-for="(item,index) in planData.time" :key="item.value">
                                            <td @click="deleteItem(index)" style="cursor: pointer;">
                                                <i class="fa fa-times" aria-hidden="true"></i>
                                            </td>
                                            <td class="weekcheck">星期
                                                <input type="checkbox" v-model="item.schedualCycle.one" v-bind:true-value='"1"' v-bind:false-value='null'>一
                                                <input type="checkbox" v-model="item.schedualCycle.two" v-bind:true-value='"1"' v-bind:false-value='null'>二
                                                <input type="checkbox" v-model="item.schedualCycle.three" v-bind:true-value='"1"' v-bind:false-value='null'>三
                                                <input type="checkbox" v-model="item.schedualCycle.four" v-bind:true-value='"1"' v-bind:false-value='null'>四
                                                <input type="checkbox" v-model="item.schedualCycle.five" v-bind:true-value='"1"' v-bind:false-value='null'>五
                                                <input type="checkbox" v-model="item.schedualCycle.six" v-bind:true-value='"1"' v-bind:false-value='null'>六
                                                <input type="checkbox" v-model="item.schedualCycle.seven" v-bind:true-value='"1"' v-bind:false-value='null'>日
                                            </td>
                                            <td>
                                                <div class="timeselect">时段</div>
                                                <div class="timeselect"><input type="text" v-model="item.time1" class="form-control pull-left" :ref="'datepicker' + index" :index="index" time="time1" placeholder="hh:ii">
                                                    <div class="icon">
                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                                <div class="timeselect">--</div>
                                                <div class="timeselect"><input type="text" v-model="item.time2" class="form-control pull-left" :ref="'datepicker_' + index" :index="index" time="time2" placeholder="hh:ii">
                                                    <div class="icon">
                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" @click="additem" style="cursor: pointer;">添加一行</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-2" style="text-align: center">
                        <button type="button" class="btn btn-info" style="margin-right:50px" @click="postUpdateUrgent">提交</button>
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">取消</button>
                    </div>
                    <div class="col-md-6"></div>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="station">
                                    <button type="button" class="btn btn-block btn-info" data-dismiss="modal">确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</template>

<script>
import bumen from "@/components/common/scheduling/bumen.vue";
import danwei from "@/components/common/scheduling/danwei.vue";
import person from "@/components/common/scheduling/person.vue";
import utils from "@/utils/index"

export default {
    data() {
        return {
            personsList: [],
            selectData: [{
                mon: false,
                tue: false,
                wed: false,
                thu: false,
                fri: false,
                sat: false,
                sun: false,
                start: '',
                end: ''
            }],

            //岗位列表
            planData: {
                plan: {},
                time: [{ schedualCycle: {} }]
            },
            // nowDay: utils.getDate().slice(0, 10),
            // time1: '12:12'
        };
    },
    components: {
        bumen,
        danwei,
        person
    },
    mounted() {
        this.getPlanId(() => {
            this.getPersons();
            this.selectDate()

        })

        $('body').addClass('date');

    },
    destroyed () {
        $('body').removeClass('date');

    },
    methods: {
        //选择时间段
        selectDate() {
            this.$nextTick(() => {
                for (let k in this.$refs) {
                    // console.log(this.planData)
                    let time = this.$refs[k][0].getAttribute('time')
                    let index = this.$refs[k][0].getAttribute('index')

                    const $ref = $(this.$refs[k])
                    // console.log($ref.attr('init'))
                    // debugger
                    if (!$ref.attr('init')) {
                        const value = $ref.val()
                        $(this.$refs[k])
                            .val(value ? `1970-01-01 ${value}` : '')
                            .datetimepicker({
                                autoclose: true,
                                format: "hh:ii",
                                startView: 1,
                                minView: 0,
                                maxView: 1,
                            })
                            .on("changeDate", ev => {
                                // console.log(ev)
                                this.planData.time[index][time] = ev.target.value;
                                // console.log(this.planData)
                                // console.log(this.newUrgentData.timeList)
                                // console.log(!$ref.attr('init'))
                            })
                            .attr('init', 1)

                    }

                }
            })

        },

        //获取要修改岗位list
        getPlanId(callback) {
            this.$api.paiban.planId({
                timeId: this.$route.query.timeId,
                palnId: this.$route.query.palnId
            }).then(res => {
                if (res.success) {
                    this.planData = res.data
                    // this.$nextTick(() => {
                    callback()
                    // })
                    // this.time1=res.data.time.time1
                    // console.log(res);
                }
            });
        },

        //获取岗位人员列表
        getPersons() {
            this.$api.paiban.persons({
                deptId: this.planData.plan.deptId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.personsList = res.data
                }
            });
        },

        //值班时间修改
        checkedValue(value) {
            if (!!value) {
                return 1
            } else {
                return 0
            }
        },
        //修改岗位信息
        postUpdateUrgent() {

            // console.log(this.planData)
            this.$api.paiban.updateUrgent({
                palnId: this.planData.plan.palnId,
                timeId: this.planData.time.timeId,
                jobName: this.planData.plan.jobName,
                deptId: this.planData.plan.deptId,
                companyId: this.planData.plan.companyId,
                leaderId: this.planData.plan.leaderId,
                phonenum: this.planData.plan.phonenum,
                remark: this.planData.plan.remark,
                persons: this.planData.list,
                timeList: this.planData.time
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.$$message({
                        message: "恭喜您，修改成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "station" });

                }
            });
        },
        //添加一行排班
        additem() {
            let addData = {
                time1: '',
                time2: '',
                planId:this.planData.plan.palnId, 
                schedualCycle: {
                    one: null,
                    two: null,
                    three: null,
                    four: null,
                    five: null,
                    six: null,
                    seven: null,
                }
            }
            this.planData.time.push(addData);
            // this.selectDate()

            this.$nextTick(() => {
                this.selectDate()
            })

        },
        //删除一行排班        
        deleteItem(index) {
            this.planData.time.splice(index, 1);
        },

    }
};
</script>

<style lang="scss" scope>
.control-label {
  padding: 0 !important;
  line-height: 34px;
  text-align: right;
}
.addgangwei {
  background: #fff;
  td {
    padding: 5px 20px;
    border: 1px solid #d2d6de;
  }
  .weekcheck {
    input {
      margin-left: 20px;
      vertical-align: middle;
      margin-top: -2px;
    }
  }
  .timeselect {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    margin: 0 10px;
    float: left;
    .form-control {
      width: 60px;
      display: inline-block;
      border-right: 0;
      margin-right: -2px;
      border-radius: 4px 0px 0px 4px !important;
    }
    .icon {
      float: left;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      color: #555;
      background-image: none;
      border: 1px solid #ccc;
      border-left: 0;
      padding-right: 10px;
      border-radius: 0px 4px 4px 0px;
    }
  }
}
body.date .table-condensed {
  margin-top: -36px !important;
  thead {
    tr {
      th {
        visibility: hidden !important;
      }
    }
  }
}
</style>
